<div id='main'>
  <ul class="nav nav-tabs nav-fill mb-3" role="tablist" style="flex-wrap: inherit;">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#systemControl" type="button"
        role="tab" aria-controls="home" aria-selected="true">
        <svg class="card_icon" viewBox="0 0 16 16">
          <use xlink:href="icons.svg#systemControl" />
        </svg>
        <span class="align-middle" data-i18n="p.to.sc"></span>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="fw-tab" data-bs-toggle="tab" data-bs-target="#firmwareUpdate" type="button"
        role="tab" aria-controls="fw" aria-selected="false" onclick="$('.masonry').masonry()">
        <svg class="card_icon" viewBox="0 0 16 16">
          <use xlink:href="icons.svg#download" />
        </svg>
        <span class="align-middle" data-i18n="p.to.fu"></span>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#systemTools" type="button"
        role="tab" aria-controls="profile" aria-selected="false" onclick="$('.masonry').masonry()">
        <svg class="card_icon" viewBox="0 0 16 16">
          <use xlink:href="icons.svg#systemTools" />
        </svg>
        <span class="align-middle" data-i18n="p.to.dt"></span>
      </button>
    </li>
  </ul>

  <div class="tab-content">

    <div class="tab-pane fade show active" id="systemControl" role="tabpanel" aria-labelledby="home-tab">
      <div class="row masonry" data-masonry='{"percentPosition": true }'>

        <div class="col-sm-12 col-md-6 mb-4">
          <div class='card'>
            <div class="card-header fw-bold" data-i18n="p.to.mc"></div>
            <div class='card-body'>
              <div class="row cmd_row">
                <span class="text-center" data-i18n="p.to.zb"></span>
                <button type='button' data-cmd="1" class='btn btn-outline-primary cmd_btn'
                  data-i18n="p.to.rst"></button>
                <button type='button' data-cmd="2" class='btn btn-outline-primary cmd_btn' data-i18n="p.to.fm"></button>
                <button type='button' data-cmd="0" class='btn btn-outline-accent2 cmd_btn' data-i18n="p.to.rr"></button>
              </div>
              <div class="row cmd_row">
                <span class="mt-2 text-center" data-i18n="p.to.esp"></span>
                <button type='button' data-cmd="3" class='btn btn-outline-warning cmd_btn' data-i18n="p.to.rst"
                  onclick="modalConstructor('restartWait')"></button>
                <button type='button' onclick="modalConstructor('factoryResetWarning')"
                  class='btn btn-outline-danger cmd_btn' data-i18n="p.to.fr"></button>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 mb-4">
          <div class='card'>
            <div class="card-header fw-bold" data-i18n="p.to.csc"></div>
            <div class='card-body'>
              <div class="row cmd_row" id="curModeSelCard" hidden>
                <span class="text-center" data-i18n="p.to.ms"></span>
                <button type='button' data-cmd="4" class='btn btn-outline-primary cmd_btn'
                  data-i18n="p.to.ntw"></button>
                <button type='button' data-cmd="5" class='btn btn-outline-warning cmd_btn'
                  data-i18n="p.to.usb"></button>
              </div>
              <div class="row cmd_row">
                <span class="mt-2 text-center" data-i18n="p.to.lt"></span>
                <button type='button' data-cmd="6&led=0&act=2" class='btn btn-outline-success cmd_btn'
                  data-i18n="p.to.pwr" id="pwrLedBtn" hidden></button>
                <button type="button" data-cmd="6&led=1&act=2" class="btn btn-outline-success cmd_btn"
                  data-i18n="p.to.mode" id="modeLedBtn" hidden></button>
                <button type="button" data-cmd="12" class="btn btn-outline-success cmd_btn"
                  data-i18n="p.to.zb"></button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="tab-pane fade" id="systemTools" role="tabpanel" aria-labelledby="profile-tab">
      <div class="row masonry" data-masonry='{"percentPosition": true }'>

        <div class="col-sm-12 mb-4">
          <div class='card'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#terminal" />
              </svg><span data-i18n="p.to.dc"></span>
            </div>
            <div class='card-body'>
              <div class="row">
                <div class="col">
                  <div class="col-sm-12" data-i18n="p.to.rd"></div>
                  <textarea class="form-control col-sm-12 mb-2" id="console" rows="8"></textarea>
                  <div class="row cmd_row">
                    <button type="button" data-cmd="8" onclick="$('console').val('')"
                      class="btn btn-outline-primary cmd_btn" data-i18n="p.to.cc"></button>
                    <button type="button" data-cmd="11" class="btn btn-outline-accent2 cmd_btn"
                      data-i18n="p.to.czc"></button>
                    <button type="button" data-cmd="10" class="btn btn-outline-success cmd_btn"
                      data-i18n="p.to.czv"></button>
                    <button type="button" data-cmd="14" class="btn btn-outline-danger cmd_btn"
                      data-i18n="p.to.eznr"></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-12 mb-4">
          <div class='card'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#file" />
              </svg><span data-i18n="p.to.fb"></span>
            </div>
            <div class='card-body'>
              <table id="filelist" class="table">
                <thead>
                  <tr>
                    <th scope="col" class="col-min-width"></th>
                    <th scope="col" data-i18n="p.to.fn"></th>
                    <th scope="col" data-i18n="p.to.s"></th>
                    <th scope="col" class="col-min-width text-end"></th>
                  </tr>
                </thead>
              </table>
              <form method="POST" action="saveFile">
                <div class="form-group">
                  <div><label for="file">File : <span id="title"></span></label><input type="hidden" name="filename"
                      id="filename" value=""></div><textarea class="form-control mb-2" id="config_file" name="file"
                    rows="10"></textarea>
                </div>
                <div class="row cmd_row">
                  <button type="submit" class="btn btn-outline-primary col-6 mt-4" data-i18n="c.save"></button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!--<div class="col-sm-12 col-md-6 mb-4">
          <div class='card'>
            <div class="card-header fw-bold">Tests</div>
            <div class='card-body'>
              <div class="row">
                <div class="col">
                  <div class="mt-3">
                    <label for="zbFirmware" class="form-label">Select firmware file</label>
                    <input class="form-control" type="file" id="zbFirmware" accept=".hex">
                    <button type="button" onclick="zbOta()" class="btn btn-warning col-sm-12 col-md-6">Update Zigbee
                      firmware</button>
                  </div>
                  <div class="mt-3">
                    <input class="form-control col-sm-6" id="sendHex" type="text" name="sendHex" value="" maxlength="50"
                      placeholder="Send hex to zigbee module">
                    <button type="button" onclick="sendHex()"
                      class="btn btn-outline-primary col-sm-3 mt-2">Send</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>-->

      </div>
    </div>

    <div class="tab-pane fade" id="firmwareUpdate" role="tabpanel" aria-labelledby="fw-tab">
      <div class="row masonry" data-masonry='{"percentPosition": true }'>

        <div class="col-sm-12 col-md-6 mb-4">
          <div class='card card-update'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#github" />
              </svg><span data-i18n="p.to.egu"></span>
            </div>
            <div class='card-body card-body-update'>
              <div class="container" style="flex-direction: column; display: flex; align-items: center;">
                <button type="button" id="upd_esp_git" class="btn btn-warning col-sm-8 mb-2"
                  data-i18n="p.to.ilfg"></button>
                <button type="button" id="info_esp_git" class="btn btn-outline-warning col-sm-8 mt-2"
                  data-i18n="p.to.saf"></button>
              </div>
              </form>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 mb-4">
          <div class='card card-update'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#file" />
              </svg><span data-i18n="p.to.efu"></span>
            </div>
            <div class='card-body card-body-update' style="padding: 0 !important;">
              <form class="container fw_form" method='POST' action='#' enctype='multipart/form-data'
                id='esp_upload_form'>
                <input type='file' name='update' id='file' onchange='sub_esp(this)' style=display:none accept='.bin'>
                <label class='file-inputFW' id='file-input' for='file' data-i18n="p.to.cf"></label>
                <button id="updButton" type="submit" class="btn btn-warning mt-1" disabled=""
                  data-i18n="c.inst"></button>
              </form>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 mb-4" hidden>
          <div class='card'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#file" />
              </svg><span data-i18n="p.to.zu"></span>
            </div>
            <div class='card-body card-body-update' style="padding: 0 !important;">
              <form class="container fw_form" method='POST' action='#' enctype='multipart/form-data'
                id='upload_form_zb'>
                <input type='file' name='update_zb' id='file_zb' onchange='sub_zb(this)' style=display:none
                  accept='.hex'>
                <label class='file-inputFW' id='file-input_zb' for='file_zb' data-i18n="p.to.cf"> </label>
                <button id="updButton_zb" type="submit" class="btn btn-primary mb-2" disabled=""
                  data-i18n="c.inst"></button>
                <br>
                <div class="container" style="max-width: 300px; margin-top: 30px;">
                  <div id='prg_zb'></div>
                  <div class='prgbarFW' id='prgbar_zb'>
                    <div class='barFW' id='bar_zb'></div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

        <div class="col-sm-12 col-md-6 mb-4">
          <div class='card card-update'>
            <div class="card-header fw-bold">
              <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                <use xlink:href="icons.svg#github" />
              </svg><span data-i18n="p.to.zgu"></span>
            </div>
            <div class='card-body card-body-update'>
              <div class="container">
                <button type="button" id="upd_zb_git" class="btn btn-primary col-sm-8 mb-2"
                  data-i18n="p.to.saf"></button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <script type='text/javascript' src='/js/masonry.js'></script>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>

  </div>